<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件化思想</title>
	</head>
	<body>
		<div id="app">
			<!-- 4.通过组件的名称利用标签进调用 -->
			<add-num-com></add-num-com>
			<add-num-com></add-num-com>
		</div>
		
		<!-- 3.定义html模板 -->
		<template id="addNumTem">
			<!-- 必须有根标签 -->
			<div>
				<h1>定义组件</h1>
				<h3>数值: {{num}}</h3>
				<button @click="addNum">自增</button>
			</div>
		</template>
		
		
		
		<!-- 1.导入vue.js -->
		<script src="../js/vue.js"></script>
		<!-- 2.定义组件 -->
		<script>
			//2.1 创建组件  全局组件
			Vue.component("addNumCom",{
				//2.2 定义组件内部结构
				data(){
					return {
						num: 0
					}
				}, 
				//2.3 定义组件的标签体  方式1: 字符串拼接  
				//					  方法2: ES6 模板字符串写法 块级作用域 反引号``
				//					  方法3: template 模板语法
				template: "#addNumTem",
				methods: {
					addNum(){
						this.num++
					}
				}
			})
			
			//3. 定义Vue对象
			const app = new Vue({
				el: "#app"
			})
		</script>
	</body>
</html>